<template>
  <div>
    <BreadCrumb pathOne="内容管理" pathTwo="FM分类管理"></BreadCrumb>
    <div>
      <el-form :inline="true">
        <el-form-item label="分类名">
          <el-input
            clearable
            size="large"
            v-model="searchName"
            style="width: 240px"
            placeholder="请输入分类名"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query" size="large">搜索</el-button>
          <el-button type="primary" @click="createOrUpdate('')" size="large">新增</el-button>
          <el-button type="danger" size="large" @click="batchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 30px"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
        :row-style="{ height: '60px' }"
      >
        <el-table-column type="selection" />
        <el-table-column fixed prop="id" label="id" />
        <el-table-column prop="name" label="分类名" />
        <el-table-column label="状态">
          <el-tag type="success">正常</el-tag>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" @click="createOrUpdate(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="form.id == '' ? '新增' : '编辑'"
      width="800"
      style="margin-bottom: 60px"
      @close="handleClose"
    >
      <!-- <el-form :model="form"> -->
      <el-form>
        <el-form-item label="分类名" label-width="auto" label-position="top">
          <br />
          <el-input
            size="large"
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入分类名"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="((dialogFormVisible = false), add())"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import BreadCrumb from '../../components/BreadCrumb.vue'
const tableData = ref([])
const axios = getCurrentInstance().appContext.config.globalProperties.axios
const query = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  }
  if (searchName.value !== '') {
    // 判断不为空字符串
    params.name = searchName.value
  }
  axios
    .get('http://localhost:8080/fmClassification/page', {
      params: params,
    })
    .then((resp) => {
      console.log('数据查询请求：', resp)
      tableData.value = resp.data.pageInfo.list
      total.value = resp.data.pageInfo.total
      console.log('表单数据：', tableData.value)
    })
}
const currentPage = ref(1) // 当前页
const pageSize = ref(10) // 每页显示条目数
const size = 'default' // 分页大小
const total = ref(0)
const handleSizeChange = (val) => {
  pageSize.value = val
  query()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  query()
}
const searchName = ref('')
const dialogFormVisible = ref(false)
const handleClose = () => {
  form.value.name = ''
  form.value.id = ''
}
const createOrUpdate = (id) => {
  dialogFormVisible.value = true
  if (id == '') {
    handleClose()
  } else {
    axios
      .get('http://localhost:8080/fmClassification', {
        params: {
          id: id,
        },
      })
      .then((resp) => {
        form.value = resp.data
        console.log('表单数据', form.value)
      })
  }
}
const form = ref({
  addOrUpdateFlag: 1,
  name: '',
  del: '0',
  id: '',
})
const add = () => {
  console.log('点击新增保存后传入的：', form.value)
  if (form.value.id == '') {
    axios
      .post('fmClassify', form.value)
      .then((resp) => {
        if (resp.code == 200) {
          ElMessage({
            message: '新增成功',
            type: 'success',
          })
        } else {
          ElMessage.error('新增失败')
        }
      })
      .finally(() => {
        query()
      })
  } else {
    axios
      .put('http://localhost:8080/fmClassification', form.value)
      .then((resp) => {
        if (resp.code == 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        } else {
          ElMessage.error('修改失败')
        }
      })
      .finally(() => {
        query()
      })
  }
}
const remove = (id) => {
  console.log('当前行的数据', id)
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      axios
        .delete('http://localhost:8080/fmClassification', {
          params: {
            id: id,
          },
        })
        .then((resp) => {
          console.log('删除后：', resp)
          if (resp.code == 200) {
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
          } else {
            ElMessage.error('删除失败')
          }
        })
        .finally(() => {
          query()
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const ids = ref('')
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id).join(',')
  console.log('批量删除的ids为:', ids.value)
}
const batchDelete = () => {
  if (!ids.value) {
    ElMessage.info('请选择要删除的数据')
    return
  }
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      axios
        .delete('http://localhost:8080/fmClassification/batch', {
          params: {
            ids: ids.value,
          },
        })
        .then((res) => {
          ElMessage.success('删除成功')
          query()
        })
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
    .finally(() => {
      query()
    })
}
onMounted(() => {
  query()
})
</script>

<style scoped>
.el-table-column {
  text-align: center;
}
</style>
